<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="vue-app">
			<ol>
				<li id="1">
					<div>实例生命周期钩子</div>
					<div>{{str}}</div>
				</li>
			</ol>
		</div>
		
		<script type="text/javascript">
			var str = "Hi!";
			var b = 0;
			console.log("beforeNewVue:"+this.b);
			var vm = new Vue({
				el:"#vue-app",//如果没有写vue的相应渲染对象的话,mounted&beforeMount是不会触发的
				data:{
					a:b,
					str:str,
				},
				beforeCreate:function(){//创建前状态
					(this.a)++;// 
					b++;//
					console.log("beforeCreate:"+this.a);//	=> beforeCreate:NaN
					//
				},
				created:function(){//创建完毕状态
					// this指向vm实例
					(this.a)++;
					console.log("created:"+this.a);
				},
				beforeMount:function(){//挂载前状态
					(this.a)++;
					console.log("beforeMount:"+this.a);
				},
				mounted:function(){//安装好,裱好的,挂载结束状态
					(this.a)++;
					console.log("mounted:"+this.a);
				},
				beforeUpdate:function(){//
					(this.a)++;
					console.log("mounted:"+this.a);
				},
				updated:function(){
					(this.a)++;
					console.log("undated:"+this.a);
				},
				beforeDestory:function(){
					(this.a)++;
					console.log("beforeDestory:"+this.a);
				},
				destroyed:function(){
					(this.a)++;
					console.log("destroyed:"+this.a);
				}
			});
			console.log("afterNewVue:"+this.b);
			setTimeout(function(){
				str = "Hello world!";
// 				vm.$destroy()
// 				str = "Hello";
				console.log("after 0.1s :"+this.b);
			},100);
			
		</script>
	</body>
</html>